<template>
  <div class="space-y-6">
    <div class="flex items-center justify-between">
      <h1 class="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
        仪表盘
      </h1>
      <div class="text-sm breadcrumbs">
        <ul>
          <li><a>首页</a></li>
          <li>仪表盘</li>
        </ul>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="stats shadow-lg bg-base-100 hover:shadow-xl transition-all duration-300 cursor-pointer">
        <div class="stat">
          <div class="stat-figure text-primary">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
              <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
            </svg>
          </div>
          <div class="stat-title">今日新增魂魄</div>
          <div class="stat-value text-primary">89</div>
          <div class="stat-desc flex items-center gap-1">
            <span class="text-success">↗︎ 22%</span>
            较昨日增加14个
          </div>
        </div>
      </div>

      <div class="stats shadow-lg bg-base-100 hover:shadow-xl transition-all duration-300 cursor-pointer">
        <div class="stat">
          <div class="stat-figure text-secondary">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="stat-title">待审判案件</div>
          <div class="stat-value text-secondary">156</div>
          <div class="stat-desc flex items-center gap-1">
            <span class="text-error">↘︎ 3%</span>
            较昨日减少7个
          </div>
        </div>
      </div>

      <div class="stats shadow-lg bg-base-100 hover:shadow-xl transition-all duration-300 cursor-pointer">
        <div class="stat">
          <div class="stat-figure text-accent">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
              <path d="M5 12a1 1 0 102 0V6.414l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L5 6.414V12zM15 8a1 1 0 10-2 0v5.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L15 13.586V8z" />
            </svg>
          </div>
          <div class="stat-title">轮回任务</div>
          <div class="stat-value text-accent">246</div>
          <div class="stat-desc flex items-center gap-1">
            <span class="text-success">↗︎ 10%</span>
            较昨日增加23个
          </div>
        </div>
      </div>

      <div class="stats shadow-lg bg-base-100 hover:shadow-xl transition-all duration-300 cursor-pointer">
        <div class="stat">
          <div class="stat-figure text-warning">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="stat-title">地狱容量</div>
          <div class="stat-value text-warning">86%</div>
          <div class="stat-desc text-error font-semibold">接近饱和</div>
        </div>
      </div>
    </div>

    <!-- 最近活动 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
            </svg>
            最近活动
          </h2>
          <div class="overflow-x-auto">
            <table class="table table-zebra">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>类型</th>
                  <th>描述</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>2024-03-09 12:30</td>
                  <td><div class="badge badge-primary">审判</div></td>
                  <td>张三案件审理完成</td>
                  <td><div class="badge badge-success gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                    已完成
                  </div></td>
                </tr>
                <tr>
                  <td>2024-03-09 11:45</td>
                  <td><div class="badge badge-secondary">轮回</div></td>
                  <td>李四转世准备</td>
                  <td><div class="badge badge-warning gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    处理中
                  </div></td>
                </tr>
                <tr>
                  <td>2024-03-09 10:20</td>
                  <td><div class="badge badge-accent">地狱</div></td>
                  <td>十八层地狱例行检查</td>
                  <td><div class="badge badge-info gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
                    </svg>
                    进行中
                  </div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 系统状态 -->
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
            </svg>
            系统状态
          </h2>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between mb-1">
                <span>CPU 使用率</span>
                <span class="text-success">45%</span>
              </div>
              <progress class="progress progress-success" value="45" max="100"></progress>
            </div>
            <div>
              <div class="flex justify-between mb-1">
                <span>内存使用率</span>
                <span class="text-warning">72%</span>
              </div>
              <progress class="progress progress-warning" value="72" max="100"></progress>
            </div>
            <div>
              <div class="flex justify-between mb-1">
                <span>存储空间</span>
                <span class="text-error">86%</span>
              </div>
              <progress class="progress progress-error" value="86" max="100"></progress>
            </div>
            <div>
              <div class="flex justify-between mb-1">
                <span>网络延迟</span>
                <span class="text-info">32ms</span>
              </div>
              <progress class="progress progress-info" value="32" max="100"></progress>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// TODO: 添加实际的数据获取和状态管理
</script>
